<template>
  <el-dialog
    v-model="visible"
    v-if="load"
    :title="title"
    width="720"
    show-footer
    show-zoom
    resize
    @close="close"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :z-index="2000"
  >
    <template #default>
      <el-form
        ref="formRef"
        :model="form"
        label-align="right"
        :label-width="handleType == 'view' ? 90 : 80"
        size="default"
        :label-position="handleType == 'view' ? 'left' : 'top'"
      >
        <el-form-item label="" prop="template_name" v-if="!form.id">
          <div class="w-full flex items-end justify-end px-1 py-1">
            <el-button type="primary" @click="select">选择商品</el-button>
          </div>
        </el-form-item>
        <div
          class="my-2 py-2 px-2 flex justify-between items-center bg-[var(--base-menu-bg-color)]"
        >
          <div>
            <div class="">SKU: {{ form.sku }}</div>
            <div class="">自定义SKU: {{ form.custom_sku }}</div>
            <div class="">产品名称: {{ form.sku_cn_title }}</div>
          </div>
          <div>
            <VImage :src="form.sku_attr_img" :width="60" :height="60"></VImage>
          </div>
        </div>
        <el-row v-if="handleType == 'view'" :gutter="20">
          <el-col :span="24">
            <span class="text-[#666666]">URL： </span>{{ form.url }}
          </el-col>
          <el-col :span="12">
            <span class="text-[#666666]">平台：</span>
            {{ form.platform_name || "--" }}
            {{ form.site || "--" }}
          </el-col>
          <el-col :span="12">
            <span class="text-[#666666]">类型：</span>
            {{ form.infringement_type_text && form.infringement_type_text.join("、") }}
          </el-col>
          <el-col :span="8">
            <span class="text-[#666666]">品牌：</span>
            {{ form.brand_name }}
          </el-col>
          <el-col :span="24">
            <span class="text-[#666666]">备注信息：</span>
            {{ form.remark }}
          </el-col>

          <el-col :span="8" v-if="form.id">
            <span class="text-[#666666]">处理状态：</span>
            {{
              form.processing_status == 1
                ? "未处理"
                : form.processing_status == 2
                ? "已处理"
                : ""
            }}
          </el-col>
          <el-col :span="16" v-if="form.id">
            <span class="text-[#666666]">处理结果：</span>
            {{ form.result || "--" }}
          </el-col>
        </el-row>
        <el-row v-else :gutter="20">
          <el-col :span="24">
            <el-form-item label="URL">
              <template v-if="handleType == 'view'">
                {{ form.url }}
              </template>
              <template v-else>
                <el-input v-model="form.url" placeholder="请输入"></el-input>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="平台" required>
              <template v-if="handleType == 'view'">
                {{ form.platform_name || "--" }}
                {{ form.site || "--" }}
              </template>
              <template v-else>
                <SelectPlatformSite
                  class="w-full"
                  v-model:platform="form.platform_id"
                  v-model:site="form.site"
                  @changePlatform="changePlatform"
                  @changeSite="changeSite"
                >
                </SelectPlatformSite>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="类型" required>
              <template v-if="handleType == 'view'">
                {{
                  form.infringement_type_text && form.infringement_type_text.join("、")
                }}
              </template>
              <template v-else>
                <el-select
                  v-model="form.infringement_type"
                  placeholder="请选择"
                  multiple
                  class="w-full"
                >
                  <el-option
                    v-for="item in props.options['goods.GoodsSkuInfringement']?.[0]
                      .infringementTypeText"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="品牌" required>
              <template v-if="handleType == 'view'">
                {{ form.brand_name }}
              </template>
              <template v-else>
                <el-input v-model="form.brand_name" placeholder="请输入"></el-input>
              </template>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="备注信息">
              <template v-if="handleType == 'view'">
                {{ form.remark }}
              </template>
              <template v-else>
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 4, maxRows: 8 }"
                  placeholder="请输入"
                  v-model="form.remark"
                ></el-input>
              </template>
            </el-form-item>
          </el-col>

          <el-col :span="8" v-if="form.id">
            <el-form-item label="处理状态">
              <template v-if="handleType == 'view'">
                {{
                  form.processing_status == 1
                    ? "未处理"
                    : form.processing_status == 2
                    ? "已处理"
                    : ""
                }}
              </template>
              <template v-else>
                <el-radio-group v-model="form.processing_status">
                  <el-radio :label="1">未处理</el-radio>
                  <el-radio :label="2">已处理</el-radio>
                </el-radio-group>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="16" v-if="form.id">
            <el-form-item label="处理结果" prop="status">
              <template v-if="handleType == 'view'">
                {{ form.result || "--" }}
              </template>
              <template v-else>
                <el-input v-model="form.result" placeholder="请填写处理结果"></el-input>
              </template>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </template>
    <template #footer>
      <div class="flex justify-center py-2" v-if="handleType == 'view'">
        <el-button @click="close">关闭</el-button>
      </div>
      <div class="flex justify-center py-2" v-else>
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="save(formRef)"
          >保 存</el-button
        >
      </div>
    </template>
  </el-dialog>
  <selectProduct ref="selectProductRef" @selected="selected"></selectProduct>
</template>
<script setup name="ComModal">
import {
  querySkuList,
  infringementCreate,
  infringementEdit,
  infringementDetail,
} from "../api/index";
import { reactive, ref, toRefs, getCurrentInstance } from "vue";
import { ElMessage } from "element-plus";
import VImage from "@/components/Image/index.vue";
import SelectPlatform from "@/components/SelectPlatform";
import selectProduct from "./selectProduct.vue";
import SelectPlatformSite from "@/components/SelectPlatformSite";

const visible = ref(false);
const loading = ref(false);
const formRef = ref(null);
const emits = defineEmits(["query"]);
const { proxy } = getCurrentInstance();
const props = defineProps({
  options: {
    type: Array,
    default: () => [],
  },
});

const data = reactive({
  form: {},
  title: "新增",
  sku: "",
  handleType: null,
  load: false,
});
const { sku, form, title, handleType, load } = toRefs(data);

const statusMap = new Map([
  ["add", "新增"],
  ["edit", "编辑"],
  ["view", "查看"],
]);
const open = async (type, id) => {
  if (!load.value) {
    load.value = true;
    await 1;
  }
  title.value = statusMap.get(type);
  handleType.value = type;
  visible.value = true;
  if (id) getDetail(id);
};

const initForm = () => {
  form.value = getForm();
};
// 初始化
const getForm = () => {
  return {
    sku: "",
    custom_sku: "",
    sku_cn_title: "",
    sku_attr_img: "",
    infringement_type: [],
    url: "",
    platform_id: "",
    brand_name: "",
    remark: "",
  };
};

onMounted(() => {
  initForm();
});

const getDetail = async (id) => {
  try {
    const res = await infringementDetail({
      id,
    });
    form.value = res.data;
  } catch (e) {
    throw Error(e);
  }
};

const search = async () => {
  if (!sku.value) {
    return;
  }
  try {
    const res = await querySkuList({
      sku: [sku.value],
    });
    if (res.data.length == 0) {
      ElMessage.error("查询的sku不存在");
      return;
    }
    form.value.sku = res.data[0].sku;
    form.value.custom_sku = res.data[0].custom_sku;
    form.value.sku_cn_title = res.data[0].sku_cn_title;
    form.value.sku_attr_img = res.data[0].attr_img;
  } catch (e) {
    throw Error(e);
  }
};

const save = () => {
  if (!formRef.value) return;
  formRef.value.validate((valid) => {
    if (valid) {
      loading.value = true;
      if (form.value.id) {
        infringementEdit(form.value)
          .then((res) => {
            ElMessage.success(res.message);
            emits("query");
            close();
          })
          .finally((e) => {
            loading.value = false;
          });
      } else {
        infringementCreate(form.value)
          .then((res) => {
            ElMessage.success(res.message);
            emits("query");
            close();
          })
          .finally((e) => {
            loading.value = false;
          });
      }
    }
  });
};

const changePlatform = (val) => {
  form.value.platform_name = val;
};

const changeSite = (val) => {
  form.value.site_name = val;
};

const close = () => {
  form.value = {};
  proxy.resetForm("formRef");
  visible.value = false;
};
defineExpose({ open });

const selectProductRef = ref();
const select = (val) => {
  selectProductRef.value.open();
};

const selected = (val) => {
  form.value.sku = val.sku;
  form.value.custom_sku = val.custom_sku;
  form.value.sku_cn_title = val.sku_cn_title;
  form.value.sku_attr_img = val.attr_img;
};
</script>
<style lang="scss" scoped>
.borderNone {
  :deep(.el-input__wrapper) {
    border: none;
    box-shadow: none;
  }
}
</style>
